<!--  -->
<template>
    <div>
        <Card>
            <div slot="title" >
                <Button v-if="btnp.gyshang_xzgys"  @click="handleAddNew" class="zh-hollow" type="primary" icon="plus-round">新增供应商</Button>
            </div>
            <Form :model="formItem" :label-width="70">
                <Row :gutter="10" type="flex"  align="middle"  >
                    <Col span="8">
                        <FormItem label="供应商">
                            <Input v-model="formItem.name" placeholder="供应商名称" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="供应范围">
                            <Select v-model="formItem.seRange" multiple >
                                <Option  v-for="item in rangeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="状态">
                            <Select v-model="formItem.status" >
                                <Option  v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="10" >
                    <Col span="14" >
                        <FormItem label="新增时间">
                            <DatePicker v-model="timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择开始和结束时间"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="10" >
                    <Col span="8" offset="16"  style="text-align:right;">
                        <Button @click="searchGetTable" class="zh-hollow" type="primary" icon="ios-search-strong" >搜索</Button>
                    </Col>
                </Row>
            </Form>
        </Card>
        <Card style="margin-top:10px;" :padding="0">
            <Table :loading="loading" border :columns="columns" :data="data"></Table>
            <Page :current.sync="formItem.pageNumber"  :total="total" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </Card> 
        <Modal  title="供应对象" v-model="modal_serobj" class=" no_footer_modal" class-name="vertical-center-modal">
            <div style="padding:15px 30px;textAlign:center" v-if="serObjs.length>0" >
                <p style="padding:5px 0;" v-for="item in serObjs" :key="item.value">{{item.name}}</p>
            </div>
            <div style="padding:15px 30px;textAlign:center" v-else>暂无供应对象</div>
        </Modal>
        <Modal 
            :title="serInfo_title" 
            v-model="modal_serInfo"
            @on-ok='save'
            ok-text="保存" 
            cancel-text="放弃操作"
            :loading="savloading"
            :mask-closable='false'
        >
            <Form  :model="serInfo" :label-width="90" style="padding:15px 30px;">
                <FormItem label="供应商名称*">
                    <Input v-model="serInfo.name" :maxlength="20"></Input>
                </FormItem>
                <FormItem label="联系人">
                    <Input v-model="serInfo.linkman" :maxlength="5"></Input>
                </FormItem>
                <FormItem label="联系电话" class="zh-radio-input">
                    <RadioGroup v-model="radio" vertical @on-change="radioChange">
                            <Radio label="mobile" style="marginBottom:10px;">手机号</Radio>
                            <Radio label="landline">座机号</Radio>
                    </RadioGroup>
                    <div>
                        <Input  style="marginBottom:10px;" :maxlength="11" :disabled="radio!=='mobile'" v-model="concat.mobile" placeholder="手机号"></Input>
                        <div class="landline-input-container">
                        <Input v-model="concat.landline1" :disabled="radio==='mobile'" placeholder="区号"></Input>-
                        <Input v-model="concat.landline2" :disabled="radio==='mobile'||concat.landline1==''" placeholder="座机号"></Input>-
                        <Input v-model="concat.landline3" :disabled="radio==='mobile'||concat.landline1==''||concat.landline2==''" placeholder="分机号"></Input>
                        </div>
                    </div>
                </FormItem>
                <FormItem label="联系邮箱*">
                    <Input v-model="serInfo.email" ></Input>
                </FormItem>
                <FormItem label="供应范围*">
                    <CheckboxGroup v-model="serInfo.checkedSer">
                        <Checkbox v-for="(item,index) in rangeList" :key="index" :label="item.value" >{{item.label}}</Checkbox>   
                    </CheckboxGroup>
                </FormItem>
                <FormItem label="图片">
                    <template v-if="!!serInfo.logo.url">
                        <div class="upload-wrap" v-if="serInfo.logo.status === 'finished'">
                            <img :src="domain+serInfo.logo.url" style="display:block;width:120px;height:120px;">
                            
                            <div class="upload-cover" style="width:120px;height:120px;">
                                    <div class="iconBox">
                                        <Icon type="ios-eye-outline" @click.native="handleView(serInfo.logo.url)"></Icon>
                                        <Icon type="ios-trash-outline" @click.native="handleRemove(serInfo.logo.url)"></Icon>
                                    </div> 
                                    
                                </div>
                        </div>
                        <template v-else>
                            <Progress v-if="serInfo.logo.showProgress" :percent="serInfo.logo.percentage" hide-info></Progress>
                        </template>
                    </template>
                    <template v-else>
                        <Upload
                            ref="upload"
                            multiple
                            :default-file-list="defaultList"
                            :show-upload-list="false"
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']"
                            :max-size="2048"
                            :on-format-error="handleFormatError"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="handleBeforeUpload"
                            type="drag"
                            :data="upLoadData"
                            action=" http://upload.qiniup.com"
                            style="display: inline-block;width:120px;height:120px;">
                            <div style="width:120px;height:120px;line-height:120px;">
                                <Icon type="ios-plus-empty" :size='40'></Icon>
                            </div>
                        </Upload>
                        <p>请上传jpg/png格式，小于2M的图片。</p>
                    </template>
                   
                </FormItem> 
            </Form>
        </Modal>
        <Modal title="查看logo" v-model="look_pic_wrap.look_pic" class="no_footer_modal">
            <!-- <p slot="header" >查看凭证</p> -->
            <img style="width:100%;" :src="domain+look_pic_wrap.src" alt="">
        </Modal>
    </div>
</template>

<script>
import util from '@/libs/util.js'
import {getQiniuToken} from '@/libs/get.js'
import {
    getProvideListTable,
    freezonProvide,
    getProvideObj,
    saveAddProvide
} from '@/libs/partner.js'
export default {
    name:'',
    data () {
        return {
            domain:this.$store.state.app.domain,
            upLoadData:{
                token:'',
                unique_names: true,
                domain:this.$store.state.app.domain
            },
            defaultList:[],
            savloading:true,
            btnp:{},
            btn:{
                gyshang_xzgys:false,
                gyshang_gydx:false,
                gyshang_bj:false,
                gyshang_dj:false,
                gyshang_jd:false,
            },
            look_pic_wrap:{
                look_pic:false,
                src:''
            },
             radio:'mobile',//landline
            concat:{
                mobile:'',
                landline1:'',
                landline2:'',
                landline3:''
            },
            serInfo:{
                name:'',
                linkman:'',
                mobile:'',
                eamil:'',
                checkedSer:[],
                logo:{
                    name:'',
                    url:'',
                    status:'',
                    showProgress:true,
                    percentage:0
                }
            },
            modal_serInfo:false,
            serInfo_title:'',
            modal_serobj:false,
            serObjs:[],
            loading:true,
            total:5,
            timeRange:[],
            formItem:{
                name:'',
                seRange:[],
                status:'全部',
                pageNumber:1,
                pageSize:10 
            },
            rangeList:[
                {
                    label:'办公用品',
                    value:'5a26d6826f1b4989984418a7e3ae61e5'
                },
                {
                    label:'凭证',
                    value:'ec7f271b84a04944bf7a23bb6c571e06'
                }
            ],
            stateList:[
                {
                    label:'全部',
                    value:'全部'
                },
                {
                    label:'正常',
                    value:'1'
                },
                {
                    label:'已冻结',
                    value:'2'
                }
            ],
            columns:[
                {
                    key:'name',
                    title:'供应商名称',
                    fixed:'left',
                    minWidth:150
                },
                {
                    key:'email',
                    title:'邮箱',
                    minWidth:120
                },
                {
                    key:'linkman',
                    title:'联系人',
                    minWidth:100
                },
                {
                    key:'contact_number',
                    title:'联系电话',
                    minWidth:120
                },
                {
                    key:'status_cn',
                    title:'状态',
                    minWidth:90,
                    align:'center'
                },
                {
                    key:'supplyscopeName',
                    title:'供应范围',
                    minWidth:150
                },
                {
                    key:'time',
                    title:'新增时间',
                    minWidth:150,
                    align:'center'
                },
                {
                key:'action',
                title:'操作',
                align:'center',
                minWidth:200,
                fixed:'right',
                render:(h,params)=>{
                    //判断是否显示某些操作按钮
                    let state=params.row.status;
                    let uuid=params.row.uuid;
                    return h('div',[
                    h('Button',{
                        props:{
                        type:'text',
                        size:'small'
                        },
                        style:{
                        color:'#2D8CF0',
                        
                        display:this.btnp.gyshang_gydx?state=='1'?'inline-block':'none':'none'
                        },
                        on:{
                        click:()=>{
                            this.getSerObj(uuid);
                        }
                        }
                    },'供应对象'),
                    h('Button',{
                        props:{
                        type:'text',
                        size:'small'
                        },
                        style:{
                        color:'#2D8CF0',
                         display:this.btnp.gyshang_bj?state=='1'?'inline-block':'none':'none'
                        },
                        on:{
                        click:async ()=>{
                            await this.qiniuToken();
                            this.modal_serInfo=true;
                            this.serInfo_title="编辑供应商信息" ;
                            this.goEdit(params.row);
                        }
                        }
                    },'编辑'),
                    h('Button',{
                        props:{
                        type:'text',
                        size:'small'
                        },
                        style:{
                        color:'#2D8CF0',
                         display:this.btnp.gyshang_jd?state!='1'?'inline-block':'none':'none'
                        },
                        on:{
                        click:()=>{
                            let config={
                            title:'解冻供应商',
                            content:'解冻供应商后，请及时更新供应商信息，重新添加供应范围。',
                            render:h=>{
                                return h('div',{style:{padding:'30px 30px 0'}},'解冻供应商后，请及时更新供应商信息，重新添加供应范围。')
                            },
                            okText:'解冻',
                            cancelText:'放弃操作',
                            onOk:()=>{
                                this.freezon(uuid,'unfreezon')
                            }
                            }
                            this.$Modal.confirm(config)
                        }
                        }
                    },'解冻'),
                    h('Button',{
                        props:{
                        type:'text',
                        size:'small'
                        },
                        style:{
                        color:'#EA0000',
                         display:this.btnp.gyshang_dj?state=='1'?'inline-block':'none':'none'
                        },
                        on:{
                        click:()=>{
                            let config={
                            title:'冻结供应商',
                            content:'冻结供应商后，该供应商提供的物品全部失效。',
                            render:h=>{
                                return h('div',{style:{padding:'30px 30px 0',textAlign:'left'}},'冻结供应商后，该供应商提供的物品全部失效。')
                            },
                            okText:'冻结',
                            cancelText:'放弃操作',
                            onOk:()=>{
                                this.freezon(uuid,'freezon')
                            }
                            }
                            this.$Modal.confirm(config)
                        }
                        }
                    },'冻结')
                    ])
                }
                }
                
            ],
            data:[]
        };
    },
    methods:{
        async goEdit(obj){
            this.serInfo={
                uuid:obj.uuid,
                name:obj.name,
                linkman:obj.linkman,
                email:obj.email,
                mobile:'',
                checkedSer:!!obj.supplyscopeUuid?obj.supplyscopeUuid.split(','):[],
                logo:{
                    name:'',
                    url:obj.image_url,
                    status:!!obj.image_url?'finished':'',
                    showProgress:true,
                    percentage:0
                }
            };
            if(!!obj.contact_number){
                if(obj.contact_number.includes('-')){
                    this.radio=='landline';
                    let arr=obj.contact_number.split('-');
                    this.concat={
                        mobile:'',
                        landline1:arr[0],
                        landline2:arr[1],
                        landline3:!!arr[2]?arr[2]:''
                    }
                }else{
                    this.concat.mobile=obj.contact_number;
                    this.radio=='mobile';
                }
            }
        },
        async save(){
            const reg=this.$store.state.app.mobileReg;
            const reg1=/^0[0-9]{2,3}/;
            const reg2=/[2-9][0-9]{6,7}/;
            const reg3=/\d{2,4}/;
            const reg4=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
            if(this.serInfo.name.length<=0||this.serInfo.name==''){
                this.$Notice.error({
                    desc:'请输入供应商名称'
                })
            }else if(this.radio=='mobile'&&this.concat.mobile!=''&&!reg.test(this.concat.mobile)){
                this.$Notice.error({
                    desc:'手机号格式错误'
                })
            }else if(this.radio!=='mobile'&&this.concat.landline1!=''&&this.concat.landline2==''){
                this.$Notice.error({
                    desc:'请输入座机号'
                })
            }else if(this.radio!=='mobile'&&this.concat.landline1!=''&&!reg1.test(this.concat.landline1)){
                this.$Notice.error({
                    desc:'请输入正确的座机区号'
                })
            }else if(this.radio!=='mobile'&&this.concat.landline1==''&&this.concat.landline2!=''){
                this.$Notice.error({
                    desc:'请输入座机区号'
                })
            }else if(this.radio!=='mobile'&&this.concat.landline2!=''&&!reg2.test(this.concat.landline2)){
                this.$Notice.error({
                    desc:'请输入正确的座机号'
                })
            }else if(this.radio!=='mobile'&&this.concat.landline3!=''&&(this.concat.landline1==''||this.concat.landline2=='')){
                this.$Notice.error({
                    desc:'有分机号，座机区号和座机号必填'
                })
            }
            else if(this.radio!=='mobile'&&this.concat.landline3!=''&&!reg3.test(this.concat.landline2)){
                this.$Notice.error({
                    desc:'请输入正确的座机分号'
                })
            }else if(this.serInfo.email==''||!this.serInfo.email){
                this.$Notice.error({
                    desc:'请输入联系邮箱'
                })
            }else if(!reg4.test(this.serInfo.email)){
                this.$Notice.error({
                    desc:'邮箱格式错误'
                })
            }else if(this.serInfo.checkedSer.length<=0||this.serInfo.checkedSer[0].length<=0){
                this.$Notice.error({
                    desc:'请选择供应范围'
                })
            }else{
                let form =JSON.parse(JSON.stringify(this.serInfo));
                if(this.radio=='mobile'){
                    form.contact_number=this.concat.mobile;
                }else{
                    if(this.concat.landline1!=''){
                        form.contact_number=this.concat.landline1+'-'+this.concat.landline2;
                    }
                    if(this.concat.landline3!=''){
                        form.contact_number=form.contact_number+'-'+this.concat.landline3;
                    }
                }
                form.supplyScope=form.checkedSer.join(',');
                form.image_url=form.logo.url;
                let res=await saveAddProvide(form);
                let response=res.data;
                if(response.code==200){
                    this.$Notice.success({
                        desc:'已保存'
                    });
                    this.modal_serInfo=false;
                    this.searchGetTable();

                }else{
                    this.$Notice.error({
                        desc:response.msg
                    });
                }
            }
            let that=this;
            this.savloading=false;
            setTimeout(()=>{
                that.savloading=true;
            },500)
            
        },
        searchGetTable(){
            this.formItem.pageNumber=1;
            this.getTable();
        },
        async getTable(){
            this.loading=true;
            let form=JSON.parse(JSON.stringify(this.formItem));
            for(let key in form){
                if(form[key]==='全部'){
                    form[key]='';
                }
            }
            if(!!this.timeRange[0]&&this.timeRange.length>0){
                form.startTime=util.time1(this.timeRange[0]);
                form.endTime=util.time1(this.timeRange[1]);
            }
            form.supplyScope=form.seRange.filter(item=>{
                if(item!=''){
                    return item
                }
            }).join(',');
            console.log(form)
            let res=await getProvideListTable(form);
            let response=res.data;
            if(response.code===200){
                this.total=response.data.total;
                this.data=response.data.rows.map(item=>{
                    item.time=item.created.slice(0,16);
                    return item
                })
                this.loading=false;
            }else{
                this.$Notice.error({
                    desc:response.msg
                });  
            }
        },
        pageSizeChange(size){
            //回到第一页
            this.formItem.pageNumber=1;
            this.formItem.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.formItem.pageNumber=number;
            this.getTable();
        },
        async freezon(uuid,flag){
            let res=await freezonProvide(uuid,flag);
            let response=res.data;
            if(response.code==200){
                this.$Notice.success({
                    desc:flag=='freezon'?'已冻结':"已解冻"
                });
                this.getTable();
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        async getSerObj(uuid){
            let res=await getProvideObj(uuid);
            let response=res.data;
            if(response.code==200){
                this.serObjs=response.data;
                this.modal_serobj=true;
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        radioChange(val){
            if(val==='mobile'){
                this.concat.landline1='';
                this.concat.landline2='';
                this.concat.landline3='';
                
            }else{
            this.concat.mobile='';
                
            }
        },

        async qiniuToken(){
            let res=await getQiniuToken();
            let response=res.data;
            if(response.code===200){
                this.upLoadData.token=JSON.parse(response.data).uptoken;
            }else{
                this.$Notice.error({
                    title: '请求出错',
                    desc:response.msg
                });
            }
        },
        handleAddNew(){
            this.modal_serInfo=true;
            this.serInfo_title="新增供应商";
            this.qiniuToken();
        },
        handleView(img){
            this.look_pic_wrap.look_pic=true;
            this.look_pic_wrap.src=img

        },
        handleRemove(img){
            this.uploadList=[];
            this.serInfo.logo={
                name:'',
                url:'',
                status:'',
                showProgress:true,
                percentage:0
            }
        },
        handleSuccess (res, file) {
            this.serInfo.logo=file;
            this.serInfo.logo.url=res.hash;
        },
        handleFormatError (file) {
            this.$Notice.warning({
                title: '图片格式错误',
                desc: '请选择 jpg 或 png 格式的图片'
            });
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '图片过大',
                desc: '请选择文件大小小于2M的图片'
            });
        },
        handleBeforeUpload (file) {
            const check = this.$refs.upload.fileList.length < 2;
            if (!check) {
                this.$Notice.warning({
                    title: '一次只能上传一张'
                });
            }
            return check;
        }
    },
    watch:{
        modal_serInfo:function(){
            if(!this.modal_serInfo){
                this.serInfo={
                    uuid:'',
                    name:'',
                    eamil:'',
                    linkman:'',
                    mobile:'',
                    checkedSer:[],
                    logo:{
                        name:'',
                        url:'',
                        status:'',
                        showProgress:true,
                        percentage:0
                    }
                };
                this.concat={
                    mobile:'',
                    landline1:'',
                    landline2:'',
                    landline3:''
                };
                this.radio='mobile';
            }
        }
    },
    created(){
        this.btnp=util.bpower(this,this.btn);
        this.getTable();
    }

}

</script>
<style lang='scss' >
.upload-wrap{
    width:120px;
    height:120px;
    text-align:center;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.iconBox{
    display:inline-block;
    position:absolute;
    top:50%;
    left:50%;
   transform: translateX(-50%) translateY(-50%);

}
.upload-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
    i{
        color: #fff;
        font-size: 30px;
        cursor: pointer;
        margin: 0 10px;
    }
}
.upload-wrap:hover .upload-cover{
    display: block;
}
</style>